<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img 图片</title>
</head>

<body>
    <font color="red" size="7">&lt;img />图片标签</font> <br/>
    <ol>
        <li>
            &lt;img <font color="red">src</font>="https://www.baidu.com/img/bd_logo1.png"
        </li>
        <li>
            &lt;img <font color="red">width</font>="150px" <font color="red">height</font>="100px" (图片宽高属性,单位px像素)
        </li>
        <li>
            &lt;img <font color="red">alt</font>="提示信息" (当图片无法正常显示时的提示信息,不同浏览器显示不同)
        </li>
        <li>
            设置src, width, height, alt:
            <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png"
                 width="150px" height="100px" alt="这是提示信息" />
        </li>
        <li>
            src="xxx": <img src="xxx" width="150px" height="100px" alt="显示错误图片"/>
        </li>
        <li>
            <!--  width: 170px; height: 89px; -->
            <div style="position: relative;">
                <!--  width="170" height="89" -->
                <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png"
                     height="100px" alt="百度" />
                <span style="position: absolute; z-index:2; top: 20px; left: 1px;">图片上显示文字!</span>
            </div>
        </li>
    </ol>

    <!--05_案例二：网站图片页面显示_分析和代码实现_.flv 已看完-->
</body>
</html>